<template>
  <template v-for="(item, index) in subMenu">
    <!--树枝-->
    <template v-if="item.children && item.children.length > 0">
      <el-sub-menu 
        :key="item.menuId + '_' + index"
        :index="item.menuId"
        style="vertical-align: middle;"
      >
        <template #title>
          <div style="display:inline;width: 100%;">
            <component
              :is="$icon[item.icon]"
              style="width: 1.5em; height: 1.5em; margin-right: 8px;vertical-align: middle;"
            >
            </component>
            <span>{{item.text}}</span> &nbsp; &nbsp;
            <span style="float: right;padding-top: 18px;padding-right: 9px;">
              <!--操作按钮-->
              <menu-option
                :subMenu="subMenu"
                :menu="item"
                :index="index"
                :dialogAddInfo="dialogAddInfo"
                :dialogModInfo="dialogModInfo"
              >
              </menu-option>
            </span>
          </div>
        </template>
        <!--递归子菜单-->
        <my-sub-menu2
          :subMenu="item.children"
          :dialogAddInfo="dialogAddInfo"
          :dialogModInfo="dialogModInfo"
        />
      </el-sub-menu>
    </template>
    <!--树叶-->
    <el-menu-item v-else :index="item.menuId" :key="item.menuId + 'son_' + index"
    >
      <template #title>
        <div style="display:inline;width: 100%;">
          <span style="float: left;">
            <component
              :is="$icon[item.icon]"
              style="width: 1.5em; height: 1.5em; margin-right: 8px;vertical-align: middle;"
            >
            </component>
            <span >{{item.text}}</span>  &nbsp; &nbsp;
          </span>
          <span style="float: right;padding-top: 18px;">
            <!--操作按钮-->
            <menu-option
              :subMenu="subMenu"
              :menu="item"
              :index="index"
              :dialogAddInfo="dialogAddInfo"
              :dialogModInfo="dialogModInfo"
            >
            </menu-option>
          </span>
        </div>
      </template>
    </el-menu-item>
  </template>
</template>


<script>
  import { ElMenuItem, ElSubMenu } from 'element-plus'
  // 展示子菜单 - 递归
  import mySubMenu2 from './menu-edit-sub.vue'
  // 操作按钮
  import menuOption from './menu-option.vue'
 
</script>

<script setup>

  const props = defineProps({
    subMenu: Array, // 要显示的菜单，可以n级
    dialogAddInfo: Object, // 添加菜单
    dialogModInfo: Object // 修改菜单
  })

</script>